<template>
	<view class="">
		<view class="stormoney boderedous mx-[20rpx]">
			<view
				class="addmoney flex boderedous items-center h-[184rpx] bg-[#fff] text-[28rpx] mt-[20rpx] pb-[30rpx] pt-[30rpx] px-[20rpx]">
				<view class="">
					<view class="flex items-center">
						<view class="font-bold">
							账户余额
						</view>
						<view class="flex text-[#999999] text-[26rpx] ml-[20rpx] items-center" @click="moneylog">

							<image src="@/static/homeimg/moneylog.svg" class="w-[30rpx] h-[30rpx] mr-[6rpx]"
								mode="aspectFit"></image>
							消费记录
							<uv-icon name="arrow-right" top="1px" size="14"></uv-icon>
						</view>
					</view>
					<view class="text-[36rpx] font-[800] mt-[30rpx]">
						￥{{chmoneydetals.balance}}
					</view>
				</view>
				<view class="center addmoneys" @click="gorecharge">
					立即充值
				</view>
			</view>
		</view>
		<view class="leading-[20rpx] boderedous bg-[#fff] mx-[20rpx] px-[20rpx] mt-[20rpx]">
			<view class="">
				<view class="pt-[40rpx] text-[30rpx] pb-[20rpx] font-bold">
					适用门店
				</view>
			</view>
			<view class="">
				<view class="spsbiwsas" v-for="(item,index) in storlist.list" :key="index"
					:class="index==storlist.list.length-1?'':'boderbottom'" @click="getdetalbus(item)">
					<view class="felx center text-[28rpx]">
						<image class="w-[35rpx] h-[43rpx] mr-[10rpx]" src="@/static/homeimg/storeicon.svg">
						</image> {{item.storeName}}
					</view>
					<view class="center">
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-popup :show="loglists" zIndex="1007500" closeable :round="10" mode="bottom" @close="loglists=false">
		<view class="text-center text-[34rpx] font-bold leading-[100rpx]">
			消费记录
		</view>
		<view class="px-[20rpx]">
			<mescroll-uni :fixed="false" height="500px" top="0" :sticky="true" @init="mescrollInit" @down="downCallback"
				:bottom="0" :up="upOption" @up="upCallback">
				<view v-for="(item,index) in loglist" :key="index" class="font-['PingFang SC']"
					style="background-color: #fff;">
					<view class=" borderbototm pb-[20rpx] pt-[20rpx] ">
						<view class="flex justify-between items-center  ">
							<view class="flex  items-center">
								<view class="relative bottom-[24rpx] mr-[10rpx]">
									<u-avatar size="20"
										:bg-color="item.type==1 || item.type==3 || item.type==5?'#FE861C':'#b4b4b4'"
										:text="item.type==1 || item.type==3 || item.type==5?'充':'支'"
										font-size="22rpx"></u-avatar>
								</view>
								<view class="">
									<view class="typeName text-[28rpx]">
										{{typestatus[item.type]}}-{{item.shopName}}
									</view>
									<view class="text-[28rpx] mt-[10rpx] text-[#989898]">
										{{item.createdAt}}
									</view>
								</view>
							</view>
							<view class="font-['PingFang SC']">
								<view
									:class="item.type==1 || item.type==3 || item.type==5?'text-[#F84343]':'text-[#000000]'"
									style="font-size: 30rpx; text-align: right;
										font-weight: bold;
										">
									{{item.type==1 || item.type==3 || item.type==5?'+':'-'}}{{item.amount}}
								</view>
								<view class="mt-[10rpx]" style="font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #989898;">
									余额：{{item.balance}}
								</view>
							</view>
						</view>
						<!-- <view class="h-[1rpx] mt-[20rpx]" style="background-color: #efefef;">
					</view> -->
					</view>
				</view>
			</mescroll-uni>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,defineProps,
		reactive,onMounted
	} from "vue"
	import {
		onShow,onPageScroll,
		onReachBottom,
	} from "@dcloudio/uni-app"
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import {
		storenamedetal,
		bulisliststore,
		applystorestore,
		storebalance,
		storecartdetals,
		storecart,
		gooddetals,
		goodscatelist,
		deleteGoods,
		decreaseGoods,
		goodattr,
		storecollect,
		storecollectnum,
		storevlueuserbills,
		storeconcern,
		vipaccount
	} from "@/api/home.js"
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom)
	const storlist=reactive({list:[]})
	const props = defineProps({
	    headtals: {
	        default: '{}',
	        type: Object,
	    },
	})
	onMounted(()=>{
		setTimeout(()=>{
			console.log("111111111",props.headtals.shopId)
			tabchanges()
			applystorestore({
				shopId: props.headtals.shopId
			}).then(res => {
				if (res.code == 200) {
					storlist.list = res.result.data
				}
			})
		},200)
	
	})
	import datanull from "@/static/homeimg/datanull.png"
	const upOption = {
		page: {
			size: 10 // 每页数据的数量,默认10
		},
		noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
		empty: {
			top: 400,
			tip: '暂无记录',
			icon: datanull,
		}
	}
	const chmoneydetals = reactive({
		balance: 0,
		id: ""
	})
	const tabchanges = () => {
			vipaccount({
				shopId: props.headtals.shopId
			}).then(res => {
				if (res.code == 200) {
					chmoneydetals.balance = res.result.balance
					chmoneydetals.id = res.result.id
				}
			})
	}
	//充值跳转
	let gorecharge = () => {
		uni.navigateTo({
			url: '/page_my/recharge/recharge?id=' + props.headtals.shopId + '&storeName=' + props.headtals
				.storeName + '&balance=' + chmoneydetals.balance
		})
	}
	import {
		useAppStore
	} from '@/stores/app.js'
	//跳转商家
	const getdetalbus = (item) => {
		useAppStore().getcategory(item.id, item.deliveryPrice)
	}
	const typestatus = {
		1: "充值",
		2: "下单支出",
		3: "退款",
		4: "商家扣款",
		5: "商家充值"
	}
	//消费记录

	const loglists = ref(false)
	const loglist = ref([])
	//适用门店
	const moneylog = () => {
		const mescroll = getMescroll()
		mescroll.num = 1
		upCallback(mescroll)
		loglists.value = true
	}
	const parms = reactive({
		page: 1,
		limit: 10,
	})
	const upCallback = (mescroll) => {
		// console.log("tabsIndex.value+1", tabsIndex.value + 1);
		setTimeout(() => {
			parms.page = mescroll.num
			parms.limit = mescroll.size
			storevlueuserbills({
				...parms,
				shopId: props.headtals.shopId
			}).then(res => {
				if (res.code === 200) {
					const list = res.result.data || []
					if (mescroll.num === 1) loglist.value = []
					loglist.value = loglist.value.concat(list)
					mescroll.endBySize(list.length, res.result.total)
				}
			}).catch(() => {
				mescroll.endErr()
			})
		}, 500)
	}
</script>

<style lang="scss" scoped>
	.spsbiwsas {
		height: 106rpx;
		line-height: 106rpx;
		display: flex;
		justify-content: space-between;
	
		.titlkd {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			margin-left: 10rpx;
			color: #000000;
			white-space: nowrap;
		}
	
		.spstext {
			font-size: 28rpx;
			color: #393939;
		}
	}
	.boderedous {
		border-radius: 20rpx;
	}
	.addmoney {
		justify-content: space-between;
	
		.addmoneys {
			width: 170rpx;
			height: 64rpx;
			background: #FFE0C5;
			border: 1px solid #FE861C;
			border-radius: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE861C;
		}
	}
	
	.boderbottom {
		border-bottom: 1px solid #EFEFEF;
	}
	.addmoney {
		justify-content: space-between;
	
		.addmoneys {
			width: 170rpx;
			height: 64rpx;
			background: #FFE0C5;
			border: 1px solid #FE861C;
			border-radius: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE861C;
		}
	}
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	::v-deep .mescroll-empty {
		box-sizing: border-box;
		width: 100%;
		padding: 3.125rem 1.5625rem;
		text-align: center;
		position: relative;
		top: 150rpx;
	}
</style>